<!--<template>-->
<!--  <div style="padding: 10px">-->
<!--    &lt;!&ndash;功能区域&ndash;&gt;-->
<!--&lt;!&ndash;    <div style="margin: 10px 0">&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="primary" @click="add">新增</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;搜索区域&ndash;&gt;-->
<!--    <div style="margin: 10px 0; display: flex; align-items: center;">-->
<!--&lt;!&ndash;      <el-input v-model="roomNameQuery" placeholder="请输入房间名进行查询" style="width: 20%" clearable></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="primary" style="margin-left: 5px" size="medium" @click="searchByRoomName">查询</el-button>&ndash;&gt;-->
<!--      <el-button type="danger" style="margin-left: 5px" size="medium" @click="batchDelete">批量删除</el-button>-->
<!--    </div>-->

<!--    &lt;!&ndash;表格区域&ndash;&gt;-->
<!--    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55"></el-table-column>-->
<!--      <el-table-column prop="id" label="ID"/>-->
<!--      <el-table-column prop="userId" label="身份证"/>-->
<!--      <el-table-column prop="roomType" label="房间类型"/>-->
<!--      <el-table-column prop="status" label="状态"/>-->
<!--      <el-table-column prop="name" label="顾客名"/>-->
<!--      <el-table-column prop="phone" label="电话号码"/>-->
<!--      <el-table-column prop="checkinDate" label="入住日期"/>-->
<!--      <el-table-column prop="orderTime" label="订购日期"/>-->
<!--      <el-table-column prop="remarks" label="备注"/>-->
<!--      <el-table-column label="操作">-->
<!--        <template #default="scope">-->
<!--          <div style="display: flex; justify-content: center;">-->
<!--            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--            <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--              <template #reference>-->
<!--                <el-button type="text">删除</el-button>-->
<!--              </template>-->
<!--            </el-popconfirm>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->


<!--    &lt;!&ndash;底部分页&ndash;&gt;-->
<!--    <div style="margin: 10px 0">-->
<!--      <el-pagination-->
<!--          v-model:current-page="currentPage"-->
<!--          v-model:page-size="pageSize"-->
<!--          :page-sizes="[5, 10, 20]"-->
<!--          :small="small"-->
<!--          :disabled="disabled"-->
<!--          :background="background"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->


<!--      &lt;!&ndash;点击新增，弹出的对话框&ndash;&gt;-->
<!--      <el-dialog-->
<!--          v-model="dialogVisible"-->
<!--          title="提示"-->
<!--          width="30%"-->
<!--      >-->
<!--        <el-form :model="form" label-width="120px">-->
<!--          <el-form-item label="身份证">-->
<!--            <el-input v-model="form.userId" style="width: 80%"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="房间类型">-->
<!--            <el-input v-model="form.roomType" style="width: 80%"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="状态">-->
<!--            <el-input v-model="form.status" style="width: 80%"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="顾客名">-->
<!--            <el-input v-model="form.name"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="电话">-->
<!--            <el-input v-model="form.phone" style="width: 80%"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="入住日期">-->
<!--            <el-input v-model="form.checkinDate" style="width: 80%"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="订购日期">-->
<!--            <el-input v-model="form.orderTime" style="width: 80%"/>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="备注">-->
<!--            <el-input v-model="form.remarks" style="width: 80%"/>-->
<!--          </el-form-item>-->

<!--        </el-form>-->
<!--        <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="save">确定</el-button>-->
<!--      </span>-->
<!--        </template>-->
<!--      </el-dialog>-->

<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import request from "@/utils/request";-->

<!--export default {-->
<!--  name: "HotelBooking",-->
<!--  components: {},-->
<!--  data() {-->
<!--    return {-->
<!--      /*前端中的一些变量*/-->
<!--      form: {},-->
<!--      dialogVisible: false,-->
<!--      search: '',-->
<!--      currentPage: 1,-->
<!--      total: 10,-->
<!--      pageSize: 10,-->
<!--      tableData: [],-->
<!--      selectedIds: [] // 存储选中的行 ID-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleEdit(row) {-->
<!--      /**-->
<!--       * 进行深拷贝-->
<!--       * 将row对象的值深拷贝给form表单对象-->
<!--       * @type {any}-->
<!--       */-->
<!--      this.form = JSON.parse(JSON.stringify(row));-->
<!--      //弹出弹窗-->
<!--      this.dialogVisible = true;-->

<!--    },-->


<!--    /*-->
<!--    删除，根据id删除-->
<!--     */-->
<!--    handleDelete(id) {-->

<!--      request.delete("/hotelBooking/deleteHotelBookings/" + id).then(res => {-->
<!--        if (res.code === '0') {-->
<!--          this.$message({-->
<!--            type: "success",-->
<!--            message: '删除成功'-->
<!--          })-->
<!--        } else {-->
<!--          this.$message({-->
<!--            type: "error",-->
<!--            message: "删除失败"-->
<!--          })-->
<!--        }-->

<!--        this.getBookingList();//删除后需要重新加载表格-->
<!--      })-->

<!--    },-->
<!--    handleSizeChange() {-->
<!--      //改变当前个数触发-->
<!--      this.getBookingList();//重新刷新表格数据-->

<!--    },-->
<!--    handleCurrentChange() {-->
<!--      //改变当前页数触发-->
<!--      this.getBookingList();//重新刷新表格数据-->
<!--    },-->


<!--    /*-->
<!--    分页查询接口-->
<!--    * */-->
<!--    getBookingList() {-->
<!--      request.get("/hotelBooking/getHotelBookingsPage", {-->
<!--        /*其中的请求参数，注意其中的{}这样写-->
<!--        前面要和后端中接口的参数名一致性，后面要和前端中的参数名一致-->
<!--        this.  代表的是前端的数据-->
<!--        * */-->
<!--        /**-->
<!--         * 其中params-->
<!--         * 是get请求中使用的，如果是需要请求参数在get请求中则必需使用这个params-->
<!--         * 但是如果是在post请求中，-->
<!--         * 则直接this.form-->
<!--         */-->
<!--        params: {-->
<!--          pageNumber: this.currentPage,-->
<!--          pageSize: this.pageSize,-->
<!--          search: this.search-->
<!--        }-->

<!--      }).then(res => {-->
<!--        console.log(res);-->
<!--        /*将返回得到的res.data.records中的数据复制给前端中的tableData属性-->
<!--        * 这样即可展示在前端页面*/-->
<!--        this.total = res.data.total;-->
<!--        this.tableData = res.data.list;-->
<!--      })-->
<!--    },-->










<!--    batchDelete() {-->
<!--      if (this.selectedIds.length === 0) {-->
<!--        this.$message({-->
<!--          type: 'warning',-->
<!--          message: '请先选择要删除的行'-->
<!--        });-->
<!--        return;-->
<!--      }-->
<!--      request.delete("/hotelBooking/deleteHotelBookingsByIds", {-->
<!--        data: this.selectedIds-->
<!--      }).then(res => {-->
<!--        if (res.code === '0') {-->
<!--          this.$message({-->
<!--            type: "success",-->
<!--            message: '批量删除成功'-->
<!--          });-->
<!--          this.getBookingList();-->
<!--          this.selectedIds = [];-->
<!--        } else {-->
<!--          this.$message({-->
<!--            type: "error",-->
<!--            message: "批量删除失败"-->
<!--          });-->
<!--        }-->
<!--      });-->
<!--    },-->

<!--    handleSelectionChange(selection) {-->
<!--      this.selectedIds = selection.map(item => item.id);-->
<!--    },-->

<!--  },-->

<!--  /*这个方法是页面以架子啊就执行其中的方法*/-->
<!--  created() {-->
<!--    this.getBookingList();-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.el-input__inner {-->
<!--  text-overflow: ellipsis;-->
<!--  overflow: hidden;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--</style>-->



<template>
  <div style="padding: 10px">
    <!--功能区域-->
    <!--    <div style="margin: 10px 0">-->
    <!--      <el-button type="primary" @click="add">新增</el-button>-->
    <!--    </div>-->
    <!--搜索区域-->
    <div style="margin: 10px 0; display: flex; align-items: center;">
      <!--      <el-input v-model="roomNameQuery" placeholder="请输入房间名进行查询" style="width: 20%" clearable></el-input>-->
      <!--      <el-button type="primary" style="margin-left: 5px" size="medium" @click="searchByRoomName">查询</el-button>-->
      <el-button type="danger" style="margin-left: 5px" size="medium" @click="batchDelete">批量删除</el-button>
    </div>

    <!--表格区域-->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="userId" label="身份证"/>
      <el-table-column prop="roomType" label="房间类型"/>
      <el-table-column prop="status" label="状态"/>
      <el-table-column prop="name" label="顾客名"/>
      <el-table-column prop="phone" label="电话号码"/>
      <el-table-column prop="checkinDate" label="入住日期"/>
      <el-table-column prop="orderTime" label="订购日期"/>
      <el-table-column prop="remarks" label="备注"/>
      <el-table-column label="操作">
        <template #default="scope">
          <div style="display: flex; justify-content: center;">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>


    <!--底部分页-->
    <div style="margin: 10px 0">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />


      <!--点击新增，弹出的对话框-->
      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%"
      >
        <el-form :model="form" label-width="120px">
          <el-form-item label="身份证">
            <el-input v-model="form.userId" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="房间类型">
            <el-input v-model="form.roomType" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="顾客名">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="入住日期">
            <el-date-picker v-model="form.checkinDate" type="date" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="订购日期">
            <el-date-picker v-model="form.orderTime" type="date" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remarks" style="width: 80%"/>
          </el-form-item>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "HotelBooking",
  components: {},
  data() {
    return {
      /*前端中的一些变量*/
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      selectedIds: [] // 存储选中的行 ID
    }
  },
  methods: {
    handleEdit(row) {
      /**
       * 进行深拷贝
       * 将row对象的值深拷贝给form表单对象
       * @type {any}
       */
      this.form = JSON.parse(JSON.stringify(row));
      //弹出弹窗
      this.dialogVisible = true;
    },


    /*
    删除，根据id删除
     */
    handleDelete(id) {
      request.delete("/hotelBooking/deleteHotelBookings/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '删除成功'
          })
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          })
        }

        this.getBookingList();//删除后需要重新加载表格
      })
    },
    handleSizeChange() {
      //改变当前个数触发
      this.getBookingList();//重新刷新表格数据
    },
    handleCurrentChange() {
      //改变当前页数触发
      this.getBookingList();//重新刷新表格数据
    },


    /*
    分页查询接口
    * */
    getBookingList() {
      request.get("/hotelBooking/getHotelBookingsPage", {
        /*其中的请求参数，注意其中的{}这样写
        前面要和后端中接口的参数名一致性，后面要和前端中的参数名一致
        this.  代表的是前端的数据
        * */
        /**
         * 其中params
         * 是get请求中使用的，如果是需要请求参数在get请求中则必需使用这个params
         * 但是如果是在post请求中，
         * 则直接this.form
         */
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }

      }).then(res => {
        console.log(res);
        /*将返回得到的res.data.records中的数据复制给前端中的tableData属性
        * 这样即可展示在前端页面*/
        this.total = res.data.total;
        this.tableData = res.data.list;
      })
    },

    batchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择要删除的行'
        });
        return;
      }
      request.delete("/hotelBooking/deleteHotelBookingsByIds", {
        data: this.selectedIds
      }).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '批量删除成功'
          });
          this.getBookingList();
          this.selectedIds = [];
        } else {
          this.$message({
            type: "error",
            message: "批量删除失败"
          });
        }
      });
    },

    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    },

    save() {
      if (this.form.id) {
        // 编辑
        request.put("/hotelBooking/updateHotelBookings", this.form).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: '编辑成功'
            });
            this.dialogVisible = false;
            this.getBookingList();
          } else {
            this.$message({
              type: "error",
              message: "编辑失败"
            });
          }
        });
      } else {
        // 新增
        request.post("/hotelBooking/addHotelBookings", this.form).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: '新增成功'
            });
            this.dialogVisible = false;
            this.getBookingList();
          } else {
            this.$message({
              type: "error",
              message: "新增失败"
            });
          }
        });
      }
    }
  },

  /*这个方法是页面以架子啊就执行其中的方法*/
  created() {
    this.getBookingList();
  }
}
</script>

<style scoped>
.el-input__inner {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

</style>




